<template>
  <div class="user-tabs user-receive">
    <template v-if="staus">
      <el-tabs
        v-model="activeName"
        class="tabs"
        type="card"
        @tab-click="onclickTab"
      >
         <el-tab-pane label="化学试剂" name="first">
          <ShowItem v-if="activeName==='first'"  :all-data="chemicalData" :projectList="project"/>
        </el-tab-pane>
        <el-tab-pane label="标准物质" name="third">
          <ShowItem v-if="activeName==='third'" :all-data="standardSubstanceData" :projectList="project"/>
        </el-tab-pane>
        <el-tab-pane label="器材" name="second">
          <ShowItem v-if="activeName==='second'" :all-data="reagentData" :projectList="project"/>
        </el-tab-pane>
      </el-tabs>
      <div class="footer">
        <div class="count">{{ chooseList.length > 99 ? "99+" : chooseList.length }}</div>
        <el-button class="footerBtn" type="primary" @click="goShopCar">申请领用</el-button>
        <!-- <button class="footerBtn" @click="goShopCar">申请领用</button> -->
      </div>
    </template>

    <template v-else>
      <ShopCar @back="goBack" />
    </template>
  </div>
</template>

<script>
import { getProjectListAPI } from '@/api/web/hjUser.js'
import ShowItem from './components/showItem.vue'
import ShopCar from './components/shopCar.vue'
import { mapState } from 'vuex'
export default {
  components: {
    ShowItem,
    ShopCar
  },
  data() {
    return {
      activeName: 'first',
      staus: true,
      project:[]
    }
  },
  computed: {
    ...mapState('hjuser', ['chooseList', 'reagentData', 'standardSubstanceData', 'chemicalData'])
  },
  created() {
    this.$store.commit('hjuser/updatedChooseList', this.chooseList.filter(item=>item.name))
    this.getProjectList()
  },
  methods: {
     async getProjectList (){
      const {data} = await getProjectListAPI()
      this.project =data
    },
    goShopCar() {
      if (this.chooseList.length === 0) return this.$message.error('请选择要申领的物品')
      this.staus = false
    },
    goBack(val,data) {
      if (val) {
        this.$store.commit('hjuser/updatedChooseList', data)
      }
      this.staus = true
    },
    onclickTab(){
      this.$store.dispatch('hjuser/getStoreHouse')
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/userTabs.scss';
.user-receive {
  .tabs {
    min-height: 750px;
  }
  .footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 35px 15px 0;
    .footerBtn {
      width: 110px;
      height: 45px;
      font-size: 16px;
      border-radius: 5px;
      padding: 9px 15px;
    }
    .count {
      position: absolute;
      right: 23px;
      top: -15px;
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border-radius: 50%;
      background-color: #fff;
      color: rgb(219, 54, 54);
    }
  }
}
</style>
